<template>
	<app-page>
		<view class="head">
			<view class="padding">
				<text class="lg text-white cuIcon-likefill" style="font-size: 48upx;"></text>
				<view class="text-white margin-top-sm text-df">1月24号清单</view>
			</view>
			<view class="flex justify-center align-center user-box">
				<image src="../../../static/test/dog.jpg" class="user-head"></image>
				<text class="lg text-white cuIcon-likefill margin-left margin-right" style="font-size: 60upx;color: #D80204;"></text>
				
				<view class="user-head shadow  wait-box other-box">TA</view>
			</view>
		</view>
		<view class="margin context-box">
			<text class="text-bold text-black">清单项目 <text class="text-sm text-gray margin-left-xs">(0/0)</text> </text>
			
			<view class="text-bold " style="margin-top: 64upx;">
				<view class="solid-bottom margin-top padding-bottom-sm flex align-center">
					<text class=" text-white cuIcon-add text-red" style="font-size: 40upx;"></text>
					<input class="flex-sub margin-left-xs input-main text-df"  placeholder="请输入清单事项" placeholder-class="text-sm text-gray" />
				</view>
			</view>
			
			<view class="todo-list " style="margin-top: 32upx;">
				<view class="flex padding-sm do-item" v-for="item in 3">
					<text class="lg text-gray cuIcon-roundcheck checkIcon"></text>
					<text class="margin-left-xs text-df text-black">未完成事项1</text>
				</view>
			</view>
			<view class="done-list" style="margin-top: 32upx;">
				<view  class="text-bold text-black margin-bottom">已完成项 <text class="text-sm text-gray margin-left-xs">(12项)</text> </view>
				
				<view class="flex padding-sm do-item" v-for="item in 3">
					<text class="lg text-green cuIcon-roundcheckfill checkIcon"></text>
					<text class="margin-left-xs text-df text-gray" style="text-decoration: line-through;">未完成事项1</text>
				</view>
			</view>
			
			
		</view>
	</app-page>
	
</template>

<script>
	export default{
		data(){
			return {
				
			}
		},
		onLoad() {
			
		},
		methods:{
			setNavColor(){
				uni.setNavigationBarColor({
				    frontColor: '#ffffff',
				    backgroundColor: '#ff0000',
				    animation: {
				        duration: 400,
				        timingFunc: 'easeIn'
				    }
				})
			}
		}
	}
</script>

<style lang="scss">
	$box-size:120upx;
	.head{
		min-height: 260upx;
		background-color: #FF0000;
		position: relative;
	}
	.user-head{
		width: $box-size;
		height: $box-size;
		border-radius: 50%;
		border:2px solid #EEEEEE;
	}
	.user-box{
		position: absolute;
		bottom: -60upx;
		left: 0;
		right: 0;
	}
	.other-box{
		color: #FF0000;
		line-height: $box-size;
		text-align: center;
		font-weight: bold;
		background-color: #fff;
		font-size: 32upx;
	}
	.context-box{
		margin-top: 100upx;
	}
	.solid-bottom{
		border-bottom:0.5px solid #eee;
	}
	.cl-input__clear, .cl-input__icon{
		color: #0081FF !important;
	}
	.input-main{
		color: #333;
		font-weight: 500;
	}
	.checkIcon{
		font-size: 36upx;
	}
	.do-item+.do-item{
	  border-top: 1px dashed  #eee;
	}
</style>
